<template>
  <a-modal
    width="600px"
    :bodyStyle="{ height: '350', overflow: 'auto' }"
    :visible="modalVisible"
    @cancel="handleCancel"
    :title="labelTitle"
  >
    <a-form-model ref="archiveUrgeRef" :rules="rules" :model="infoForm">

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol"   label="申请人/第三人" prop="applyper" has-feedback>
        <a-select v-model="infoForm.applyper" placeholder="请选择申请人/第三人"  style="width: 70%"  allowClear>
          <a-select-option v-for="person in personList" :key="person.id" :value="person.id">
            {{ person.lable }}
          </a-select-option>
        </a-select>

      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="决定日期" prop="decisiondate" has-feedback>
        <a-date-picker 
          v-model="infoForm.decisiondate"
          placeholder="请选择决定日期"
          format="YYYY-MM-DD"
          :allowClear="true"
          style="min-width: 250px"
        />
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="送达日期" prop="arrivedate" has-feedback>
        <a-date-picker
          v-model="infoForm.arrivedate"
          placeholder="请选择送达日期"
          format="YYYY-MM-DD"
          :allowClear="true"
          style="min-width: 250px"
        />
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol"  label="决定期限" prop="applyper" has-feedback>
        <a-input-number :min="0" v-model="infoForm.deadlineday" placeholder="请输入决定期限"   style="min-width: 250px" allowClear>
        </a-input-number>
      </a-form-model-item>

    </a-form-model>

    <template slot="footer">
      <div style="display: flex; justify-content: center">
        <a-button style="margin-right: 20px" @click="handleCancel"> 取消 </a-button>
        <a-button type="primary" icon="save" @click="onSubmit" :loading="loading"> 提交 </a-button>
      </div>
    </template>
  </a-modal>
</template>
<script>
import storage from 'store'
import { APP_USER, APP_DEPT } from '@/store/mutation-types'
import { startBusinessProced } from '@/api/accept/business_Approve'
import { Tp_archivetypeEnum } from '@/enumeration/Tp_proctype'
export default {
  props: {
    applyid: {
      type: String,
      required: true
    },
    processinstanceid: {
      type: String,
      required: true
    },
    armireInfo: {
      type: Object,
      required: true
    }
  },
  
  data() {
    return {
      labelCol: { span: 6 }, // label宽
      wrapperCol: { span: 18 }, // 组件宽
      loading: false, //按钮显示
      modalVisible: false, // 模态框显示
      infoForm: {
        applyid: '', // applyid
        proctype: '', // 操作分类
        userid: '',
        username: '',
        processinstanceid: '',
        cause: '', // 案由
        describe: '', // 行政复议申请
        applyper: undefined, // 申请人姓名, 第三人姓名
        decisiondate: undefined, //决定日期
        arrivedate: undefined, //送达日期
        deadlineday: undefined // 履行行政复议决定期限
      },
      currentUser: storage.get(APP_USER), // 登录人信息
      currentDept: storage.get(APP_DEPT), // 登录人部门
      rules: {
        applyper: [{ required: true, message: '请选择申请人/第三人', trigger: 'change' }],
        decisiondate: [{ required: true, message: '请选择决定日期', trigger: 'change' }],
        arrivedate: [{ required: true, message: '请选择送达日期', trigger: 'change' }],
        deadlineday: [{ required: true, message: '请输入决定期限',trigger: 'blur'  }]
      },
      labelTitle: '',
      proctype: Tp_archivetypeEnum.execute_reminder.key,
      personList: []
    }
  },
  created() {
  },
  methods: {
    init() {
      this.modalVisible = true
      this.labelTitle = "履行催告"
      this.resetForm()
      this.personList = []
      if (this.armireInfo) {
        if (this.armireInfo.applicantList) {
          this.armireInfo.applicantList.forEach(element => {
            element.lable = "申请人-" + element.name
            this.personList.push(element)
          });
        }
        if (this.armireInfo.thirdperList) {
          this.armireInfo.thirdperList.forEach(element => {
            element.lable = "第三人-" + element.name
            this.personList.push(element)
          });
        }
      }
    },
    handleCancel() {
      this.resetForm()
      this.modalVisible = false
    },
    resetForm() {
        this.$nextTick(() => {
            this.$refs.archiveUrgeRef.resetFields()
        })
    },
    /**
     * 提交表单
     */
    onSubmit() {
      let _this = this
      this.$refs.archiveUrgeRef.validate((valid) => {
        _this.loading = true
        if (valid) {
          console.log('submit!', _this.infoForm)
          let params = {
            applyid: _this.applyid, // applyid
            proctype: _this.proctype, // 操作分类
            userid: _this.currentUser.userId,
            username: _this.currentUser.fullname,
            processinstanceid: _this.processinstanceid, // 流程实例id
            cause: _this.infoForm.cause, // 案由
            describe: _this.infoForm.describe, // 行政复议申请
          }

          let decisiondate = _this.infoForm.decisiondate.format('YYYY年MM月DD日'); //决定日期
          let arrivedate = _this.infoForm.arrivedate.format('YYYY年MM月DD日'); //送达日期

          let applyperItem = this.personList.filter(item => item.id == _this.infoForm.applyper)[0]
          let applyper = applyperItem.name
          let docfield = {
              applyper: applyper, //有关人事/监察部门
              decisiondate: decisiondate, // 决定日期
              arrivedate: arrivedate, // 送达日期
              deadlineday:  _this.infoForm.deadlineday // 履行行政复议决定期限
          }
          console.log('入参参数：' + params)
          startBusinessProced(params, docfield).then((res) => {
            if (res.code !== 0) {
              _this.$message.error('操作失败')
            } else {
              _this.$message.success('操作成功')
              _this.$emit('reload')
              _this.$emit('close')
              _this.modalVisible = false
            }
            _this.loading = false
          })
        } else {
          _this.loading = false
          // 加延时器的目的是为了vue实例更新未完成，我们可能获取DOM失败的问题
          // 利用原生js的方式，获取所有失败的类名，获得一个数组，取第一个元素获取焦点
          setTimeout(() => {
            const isError = document.getElementsByClassName('has-error')
            const input = isError[0].querySelector('input')
            //console.log(input)
            if (input !== null && input !== 'undefind' && input !== '') {
              isError[0].querySelector('input').focus()
                ? isError[0].querySelector('input').focus()
                : isError[0].querySelector('input').click()
            } else {
              isError[0].querySelector('textarea').focus()
            }
          }, 10)
          return false
        }
      })
    },
  },
}
</script>
    
<style lang="scss" scoped></style>
        